<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camunda Form Example</title>
    <link href="https://cdn.form.io/formiojs/formio.full.min.css" rel="stylesheet">
</head>
<body>
<div id="form-container"></div>
<button id="submit-btn">Submit</button>
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<script>
    // 读取表单 JSON 文件
    fetch('form.json')
        .then(response => response.json())
        .then(formJson => {
            // 转换表单 JSON 格式（如果需要）
            const formioJson = convertToFormioJson(formJson);

            // 创建表单实例
            const form = new Formio.Form(document.getElementById('form-container'), formioJson);

            // 渲染表单
            form.render().then(() => {
                console.log('Form rendered successfully');
            }).catch((error) => {
                console.error('Error rendering form:', error);
            });

            // 处理表单提交
            document.getElementById('submit-btn').addEventListener('click', () => {
                form.submit().then((submission) => {
                    console.log('Form submitted:', submission);
                }).catch((error) => {
                    console.error('Error submitting form:', error);
                });
            });
        })
        .catch(error => {
            console.error('Error fetching form JSON:', error);
        });

    // 示例转换函数
    function convertToFormioJson(camundaFormJson) {
        return {
            components: camundaFormJson.fields.map(field => ({
                type: field.type,
                label: field.label,
                key: field.id,
                validate: {
                    required: field.properties.required,
                    pattern: field.properties.pattern
                }
            }))
        };
    }
</script>
</body>
</html>